<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <h1>使用props实现父组件向子组件传值</h1>
    <lml info="hello" msg="666" left-content="10:19"
      :msg1="[1,2,3,4]" :msg2="time" :msg3="num"></lml>
    <p><mark>{{num}}</mark></p>
    <hr>
    <p>单向数据流：父组件的数据传给子组件后，子组件只能用，不能改。</p>
  </div>
  <script src="../js/vue.js"></script>
  <script>
    let vm = new Vue({
      el: '#app',
      data: function() {
        return {
          time: '09:18',
          num: 6
        }
      },
      components: {
        lml: {
          template: 
          `
            <div>
              <p>我是一个组件,父组件的数据是：{{info}}/{{msg}}</p>
              <p>{{msg1.length}}</p>
              <p>{{msg2}}</p>
              <p>{{msg3}}</p>
              <p>-------------{{newMsg3}}-------------</p>
              <p>============={{newerMsg3}}============</p>
              <p>这个数据来自组件的data：{{tip}}</p>
              <input v-model="msg3">
              <p>在html和css中使用中划线的形式；在JS中使用驼峰形式：{{leftContent}}</p>
            </div>
          `,
          props: ['info', 'msg', 'msg1', 'msg2', 'msg3', 'leftContent'],
          data() {
            return {
              tip: '777',
              newMsg3: this.msg3
            }
          },
          beforeMount() {
            this.newMsg3 = this.newMsg3 + 6
          },
          computed: {
            newerMsg3: function() {
              return this.msg3 * 2
            }
          },
        }
      }
    })
  </script>
</body>
</html>